<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login">
        <div class="item">
          <span class="s1">账号</span>
          <el-input
            placeholder="请输入账号"
            v-model="userData.login_name"
            clearable
          >
          </el-input>
        </div>
        <div class="item">
          <span class="s1">密码</span>
          <el-input
            placeholder="请输入密码"
            v-model="userData.password"
            clearable
            type="password"
          >
          </el-input>
        </div>
        <div class="item flex">
          <el-checkbox class="el-check" v-model="checked"
            >记住用户名</el-checkbox
          >
        </div>
        <div class="login-sub" @click="login">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Login, Verification } from "api/login";
export default {
  data: function() {
    return {
      routeName: "",
      loadingV: false,
      userData: {
        login_name: "",
        password: "",
        validCode: "GKXD",
      },
      imgUrl: "",
      checked: false,
      loading: false,
    };
  },
  created() {
    let username = window.localStorage.getItem("myUsername");
    if (username) {
      this.userData.login_name = username;
    }
    this.routeName = this.$route.query.name ? this.$route.query.name : "index";
    console.log(this.$route.query.name);
  },
  async mounted() {},
  methods: {
    // async getVerification() {
    //   this.loadingV = true;
    //   try {
    //     let res = await Verification();
    //     let blob = new Blob([res.data], { type: "image/png" });
    //     let url = window.URL.createObjectURL(blob);
    //     this.imgUrl = url;
    //   } catch (err) {
    //     console.log(err);
    //   }
    //   this.loadingV = false;
    // },
    async login() {
      if (!this.userData.login_name.trim()) {
        this.tipErr("请输入账号名称");
        this.loading = false;
        return;
      } else if (!this.userData.password.trim()) {
        this.tipErr("请输入密码");
        this.loading = false;
        return;
      }
      // else if (!this.userData.validCode.trim()) {
      //   this.tipErr("请输入验证码");
      //   this.loading = false;
      //   return;
      // }
      this.loading = true;
      let that = this;
      if (this.checked) {
        window.localStorage.setItem("myUsername", this.userData.login_name);
      }
      // let { data } = await Login(this.userData);

      // this.loading = false;
      // if (data.code == 200) {
      //   let userInfo = { ...data.data.user };
      //   userInfo.Authorization = `${data.data.tokenHead} ${data.data.token}`;
      //   window.localStorage.setItem("userInfo", JSON.stringify(userInfo));
      //   this.$store.commit("SET_USER_INFO", userInfo);
      //   console.log(this.routeName);
      //   this.$router.push({
      //     name: this.routeName,
      //   });
      // } else {
      //   this.tipErr(data.message);
      // }
    },

    tipErr(msg) {
      this.$message.error({
        message: msg,
        offset: 300,
        duration: 2000,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: #000 url(../assets/imgs/login_bg.png) no-repeat left center;
  background-size: contain;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .login-box {
    padding-right: 286px;
    padding-left: 200px;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(7, 37, 63, 0) 0,
      rgba(7, 37, 63, 0.7) 50%
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .login {
    width: 459px;
    height: 429px;
    background: url(../assets/imgs/login_ipt_bg.png) no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
    padding: 70px 43px 68px;
    .item /deep/ {
      display: flex;
      margin-bottom: 20px;
      .veri {
        width: 100px;
        height: 48px;
        text-align: center;
        color: #3cc4fe;
        cursor: pointer;
      }
      .yanzheng {
        flex: 1;
        margin-right: 20px;
      }
      .s1 {
        width: 50px;
        font-size: 16px;
        color: #3cc4fe;
        line-height: 48px;
        margin-right: 20px;
        flex-shrink: 0;
      }
      .el-input {
        flex: 1;
        .el-input__inner {
          width: 100%;
          height: 48px;
          line-height: 48px;
          border: 1px solid #3cc4fe;
          box-sizing: border-box;
          padding: 0 0 0 20px;
          font-size: 16px;
          color: #3cc4fe;
          border-radius: 8px;
          background: rgba($color: #000000, $alpha: 0);
        }
      }
      ::-webkit-input-placeholder {
        font-size: 16px;
        color: #3cc4fe;
        opacity: 0.6;
      }
      .el-check {
        margin-left: 60px;
      }
      .el-checkbox__inner {
        width: 24px;
        height: 24px;
        background: transparent;
        border: 1px solid #3bc3fd;
        border-radius: 2px;
      }
      .el-checkbox__label {
        font-size: 16px;
        color: #3bc3fd;
        opacity: 0.8;
        line-height: 24px;
      }
      .el-checkbox__input.is-checked {
        background: rgba(59, 195, 253, 0.5);
      }
      .el-checkbox__input.is-checked + .el-checkbox__label {
        opacity: 1;
        font-size: 16px;
        color: #3bc3fd;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner::after {
        transform: rotate(45deg) scaleY(1);
      }
      .el-checkbox__inner::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #3bc3fd;
        border-left: 0;
        border-top: 0;
        height: 9px;
        left: 8px;
        position: absolute;
        top: 4px;
        transform: rotate(45deg) scaleY(0);
        width: 4px;
        transition: transform 0.15s ease-in 0.05s;
        transform-origin: center;
      }
    }
    .item.flex {
      display: flex;
      justify-content: space-between;
      .forget {
        font-size: 16px;
        color: #3bc3fd;
        opacity: 0.6;
        text-decoration: none;
      }
    }
    .login-sub {
      margin-left: 60px;
      width: 313px;
      height: 48px;
      box-sizing: border-box;
      text-align: center;
      line-height: 48px;
      border: 1px solid #3bc3fd;
      border-radius: 8px;
      font-size: 16px;
      color: #3bc3fd;
      background: transparent;
      opacity: 0.8;
      cursor: pointer;
      &:hover {
        opacity: 1;
        background: rgba(59, 195, 253, 0.5);
      }
    }
  }
}
</style>
